﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
@using Microsoft.AspNetCore.Antiforgery
@inject IAntiforgery Antiforgery
<style>
    .title-with-border {
        border-left: 4px solid #007BFF; /* 蓝色竖线，宽度为4px */
        padding-left: 10px; /* 文字与边框的间距 */
        font-size: 18px; /* 文字大小 */
        font-weight: bold; /* 文字加粗 */
        color: #333; /* 文字颜色 */
    }

    .text-input {
        margin-bottom: 20px; /* 每个文本框下方留出20px的间距 */
        width: 100%;
    }

    .button-container {
        display: flex;
        justify-content: flex-end; /* 内容靠右对齐 */
        gap: 10px; /* 按钮之间的间距（可选） */
        justify-content: center; /* 小屏幕居中对齐 */
    }

    .search-btn {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #1E9FFF;
    }

    .layui-input-inline {
        position: relative;
    }

    .quantity-control {
        display: flex;
        align-items: center;
    }

    .quantity-btn {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #e6e6e6;
        cursor: pointer;
        user-select: none;
    }

    .quantity-input {
        width: 60px !important;
        text-align: center;
        margin: 0 5px;
    }
</style>
<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<body>
    <div class="title-with-border">生产报工</div>
    <form class="layui-form" action="">
        @Html.AntiForgeryToken()
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span>报工类型</label>
            <div class="layui-input-inline">
                <select name="reportingType" lay-verify="required">
                    <option value="">请选择报工类型</option>
                    <option value="自行报工">自行报工</option>
                    <option value="统一报工">统一报工</option>
                </select>
            </div>
            <label class="layui-form-label"><span style="color: red;">*</span>生产工单</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="workOrder" name="productionWorkOrderCode" lay-verify="required" placeholder="请输入生产工单" autocomplete="off" readonly class="layui-input">
                <i class="layui-icon layui-icon-search search-btn" onclick="showProductionWorkOrderMain()"></i>
            </div>
            <label class="layui-form-label"><span style="color: red;">*</span>生产任务</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="productionTask" name="productionTask" lay-verify="required" placeholder="请输入生产任务" autocomplete="off" readonly class="layui-input">
                <i class="layui-icon layui-icon-search search-btn" onclick="showProductionTask()"></i>
            </div>
            <label class="layui-form-label"><span style="color: red;">*</span>报工人</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="reporter" name="reporter" lay-verify="required" placeholder="请输入报工人" autocomplete="off" readonly class="layui-input">
                <i class="layui-icon layui-icon-search search-btn" onclick="showReportWorker()"></i>
            </div>
            <label class="layui-form-label"><span style="color: red;">*</span>审核人</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="reviewer" name="approver" lay-verify="required" placeholder="请输入审核人" autocomplete="off" readonly class="layui-input">
                <i class="layui-icon layui-icon-search search-btn" onclick="showReviewers()"></i>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span>产品编码</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="productCode" name="productMaterialCode" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label"><span style="color: red;">*</span>产品名称</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="productName" name="productMaterialName" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label"><span style="color: red;">*</span>单位</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="unit" name="unit" lay-verify="required" autocomplete="off" class="layui-input" readonly>
            </div>
            <label class="layui-form-label"><span style="color: red;">*</span>规格型号</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="productModel" name="productModel" lay-verify="required" autocomplete="off" class="layui-input" readonly>
            </div>
            <label class="layui-form-label"><span style="color: red;">*</span>工作站名称</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="workstationName" name="workstationName" lay-verify="required" autocomplete="off" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">报工数量</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="number" id="reportQuantity" name="reportingQuantity" lay-verify="required|number" autocomplete="off" class="layui-input" readonly>
            </div>
            <label class="layui-form-label">待检测数量</label>
            <div class="layui-input-inline">
                <div class="quantity-control">
                    <div class="quantity-btn" onclick="changeQuantity(-1)">-</div>
                    <input type="number" id="inspectionQuantity" name="detectNumber" lay-verify="required|number" autocomplete="off" class="layui-input quantity-input" value="0" readonly>
                    <div class="quantity-btn" onclick="changeQuantity(1)">+</div>
                </div>
            </div>
            <label class="layui-form-label">状态:</label>
            <div class="layui-input-inline">
                <select name="states" id="states" lay-verify="required">
                    <option value="">请选择状态</option>
                    <option value="1">草稿</option>
                    <option value="2">审核中</option>
                    <option value="3">已完成</option>
                    <option value="4">已拒绝</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入备注" class="layui-textarea text-input" style="width: 700px; height: 150px;"></textarea>
            </div>
        </div>
        <div class="layui-form-item form-actions button-container">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="userForm">
                    <i class="layui-icon layui-icon-ok"></i> 保存
                </button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="returnquery()">
                    <i class="layui-icon layui-icon-return"></i> 返回
                </button>
            </div>
        </div>
    </form>
</body>
<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer', 'table'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;

        // 表单提交
        form.on('submit(userForm)', function(data){
            // 获取表单数据
            var formData = {
                reportingType: data.field.reportingType,
                workstationName: data.field.workstationName || '默认工作站',
                productionWorkOrderCode: data.field.productionWorkOrderCode,
                productionTask: data.field.productionTask,
                productMaterialCode: data.field.productMaterialCode,
                productMaterialName: data.field.productMaterialName,
                unit: data.field.unit,
                productModel: data.field.productModel,
                reportingQuantity: parseInt(data.field.reportingQuantity) || 0,
                detectNumber: parseInt(data.field.detectNumber) || 0,
                reporter: data.field.reporter,
                reportingTime: new Date().toISOString(),
                approver: data.field.approver,
                remark: data.field.remark || '',
                recorder: data.field.reporter,
                states: parseInt(data.field.states) || 1  // 如果没有选择状态，默认为草稿状态(1)
            };

            // 表单验证
            var requiredFields = {
                'reportingType': '报工类型',
                'workstationName': '工作站',
                'productionWorkOrderCode': '生产工单',
                'productionTask': '生产任务',
                'productMaterialCode': '产品编码',
                'productMaterialName': '产品名称',
                'unit': '单位',
                'productModel': '规格型号',
                'reporter': '报工人',
                'approver': '审核人',
                'remark': '备注',
                'states': '状态'  // 添加状态字段验证
            };

            // 检查所有必填字段
            for (var field in requiredFields) {
                if (!formData[field]) {
                    layer.msg('请填写' + requiredFields[field], { icon: 2 });
                    return false;
                }
            }

            // 发送保存请求
            $.ajax({
                url: '/ProductionReport/AddProductionReportingMain',
                type: 'POST',
                contentType: 'application/x-www-form-urlencoded',  // 修改为表单提交格式
                data: formData,  // 直接发送表单数据
                headers: {
                    'RequestVerificationToken': $('input[name="__RequestVerificationToken"]').val()
                },
                success: function(res) {
                    if (res === 1) {
                        layer.msg('保存成功', {
                            icon: 1,
                            time: 2000
                        }, function() {
                            // 保存成功后返回列表页
                            location.href = "/ProductionReport/ProductionReportView";
                        });
                    } else {
                        layer.msg('保存失败', {
                            icon: 2,
                            time: 2000
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('保存失败:', xhr.responseText);
                    var errorMessage = '保存失败';
                    try {
                        var response = JSON.parse(xhr.responseText);
                        if (response.error && response.error.details) {
                            errorMessage += '：' + response.error.details;
                        } else if (response.error && response.error.message) {
                            errorMessage += '：' + response.error.message;
                        }
                    } catch(e) {
                        errorMessage += '，请检查数据格式是否正确';
                    }
                    layer.msg(errorMessage, {
                        icon: 2,
                        time: 2000
                    });
                }
            });
            return false; // 阻止表单默认提交
        });
    });
    //工单弹出框
    function showProductionWorkOrderMain() {
        layer.open({
            type: 2,
            title: '工单选择',
            skin: 'layui-layer-rim', //加上边框
            area: ['1800px', '1000px'], //宽高
            content: '/ProductionReport/ProductionWorkOrderMainView'
        });
    }
    //生产任务弹出框
    function showProductionTask() {
        layer.open({
            type: 2,
            title: '生产任务选择',
            skin: 'layui-layer-rim', //加上边框
            area: ['1800px', '1000px'], //宽高
            content: '/ProductionReport/ProductionTaskView'
        });
    }
    //报工人弹出框
    function showReportWorker() {
        layer.open({
            type: 2,
            title: '人员选择',
            skin: 'layui-layer-rim', //加上边框
            area: ['1800px', '1000px'], //宽高
            content: '/ProductionReport/ReportWorkerView'
        });
    }
    //审核人弹出框
    function showReviewers() {
        layer.open({
            type: 2,
            title: '人员选择',
            skin: 'layui-layer-rim', //加上边框
            area: ['1800px', '1000px'], //宽高
            content: '/ProductionReport/ReviewersView'
        });
    }
    function returnquery(){
        location.href = "/ProductionReport/ProductionReportView"
    }

    // 修改数量的函数
    function changeQuantity(delta) {
        var inspectionInput = document.getElementById('inspectionQuantity');
        var reportInput = document.getElementById('reportQuantity');

        var currentValue = parseInt(inspectionInput.value) || 0;
        var newValue = currentValue + delta;

        // 确保数量不小于0
        if (newValue >= 0) {
            inspectionInput.value = newValue;
            reportInput.value = newValue;
        }
    }

    // 添加接收工单数据的函数
    function fillWorkOrderData(data) {
        // 填充工单相关字段
        $('input[name="WorkOrderCode"]').val(data.workOrderCode);
        $('input[name="ProductCode"]').val(data.productCode);
        $('input[name="Unit"]').val(data.unit);
        $('input[name="ProductName"]').val(data.productName);

        // 触发表单更新
        layui.form.render();
    }

    layui.use(['form', 'layer'], function(){
        var form = layui.form;
        var layer = layui.layer;

        // 工单选择按钮点击事件
        $('#selectWorkOrder').on('click', function(){
            layer.open({
                type: 2,
                title: '选择工单',
                area: ['1200px', '600px'],
                content: '/ProductionReport/ProductionWorkOrderMainView',
                maxmin: true
            });
        });
    });
</script>
